<template>
  <h1>vue3</h1>
  <!-- 
    插槽：用来父子组件通信，通信的是标签数据
    分类：
      1. 默认插槽

      2. 具名插槽

      3. 作用域插槽
   -->
  <AChild>
    <!-- 默认插槽 -->
    <p>aaaaaaaaa</p>
    <div>bbbbbbbbb</div>
    <p>ccccccccc</p>
  </AChild>

  <BChild>
    <!-- 结论：优先使用默认插槽，有其他结构需要渲染到其他位置，就使用具名插槽 -->
    <!-- 具名插槽 -->
    <template v-slot:header>
      <p>aaaaaaaaa</p>
    </template>

    <!-- 默认插槽 -->
    <div>bbbbbbbbb</div>
    <p>ccccccccc</p>
  </BChild>

  <CChild>
    <!-- 
      默认插槽如何使用作用域插槽数据 
      v-slot="{ }"
        v-slot没有取名称，所以是默认插槽
        "{  }" 对传递过来的作用域插槽数据进行解构
        （传递过来的作用域插槽数据一定是对象）
    -->
    <template v-slot="{ count }">
      <p>count的值：{{ count }}</p>
    </template>

    <!-- <template v-slot:default="{ count }">
      <p>count的值：{{ count }}</p>
    </template> -->

    <!-- <template v-slot:header="{ count }">
      <p>count的值：{{ count }}</p>
    </template> -->

    <!-- 具名插槽使用作用域插槽数据  -->
    <template #header="{ count }">
      <p>count的值：{{ count }}</p>
    </template>
  </CChild>
</template>

<script lang="ts">
import AChild from "./AChild.vue";
import BChild from "./BChild.vue";
import CChild from "./CChild.vue";

export default {
  name: "App",
  components: {
    AChild,
    BChild,
    CChild,
  },
};
</script>

<style scoped></style>
